<template>
    <el-card>
        <!-- 表格按钮区域 -->
        <div slot="header">
            <el-button type="primary" plain @click="addUserDialogVisible = true">添加信息</el-button>
            <el-button type="danger" plain @click="batchHandleDelete">批量删除</el-button>
            <el-button type="info" plain>excel上传</el-button>
            <el-button type="info" plain>模板下载</el-button>
            <el-button type="info" plain>选择导出</el-button>
            <el-button type="info" plain>全部信息导出</el-button>
        </div>
        <!-- 表格区域 -->
        <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <!-- 展开内容 -->
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="用户学号">
                        <span>{{ props.row.ID }}</span>
                    </el-form-item>
                    <el-form-item label="用户名称">
                        <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="性别">
                        <span>{{ props.row.sex }}</span>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <span>{{ props.row.birthday }}</span>
                    </el-form-item>
                    <el-form-item label="所属学院">
                        <span>{{ props.row.college }}</span>
                    </el-form-item>
                    <el-form-item label="所属班级">
                        <span>{{ props.row.class }}</span>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <span>{{ props.row.phone }}</span>
                    </el-form-item>
                    <el-form-item label="入馆时间">
                        <span>{{ props.row.time }}</span>
                    </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <!-- 表格列内容 -->
            <el-table-column
                type="selection">
            </el-table-column>
            <el-table-column
                type="index"
                :index="(currentPageNumber-1)*pageDataSize+1">
            </el-table-column>
            <el-table-column
            label="用户学号"
            prop="ID">
            </el-table-column>
            <el-table-column
            label="用户名称"
            prop="name">
            </el-table-column>
            <el-table-column
            label="入馆时间"
            prop="time">
            </el-table-column>
            <!-- 表格右侧的按钮 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="warning"
                    @click="handleExit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPageNumber"
            :page-sizes="[5, 10, 20, 100]"
            :page-size="pageDataSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableDataSize">
        </el-pagination>
        <!-- 添加用户的dialog -->
        <el-dialog title="添加用户" :visible.sync="addUserDialogVisible">
            <el-form :model="addUserform">
                <el-form-item label="用户ID" :label-width='formLabelWidth'>
                    <el-input v-model="addUserform.ID" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" :label-width='formLabelWidth'>
                    <el-input v-model="addUserform.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width='formLabelWidth'>
                    <el-input v-model="addUserform.sex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" :label-width='formLabelWidth'>
                    <el-input v-model="addUserform.birthday" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属学院" :label-width='formLabelWidth'>
                    <el-input v-model="addUserform.college" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属班级" :label-width='formLabelWidth'>
                    <el-input v-model="addUserform.class" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width='formLabelWidth'>
                    <el-input v-model="addUserform.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入馆时间" :label-width='formLabelWidth'>
                    <el-input v-model="addUserform.time" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addUserDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑信息" :visible.sync="editUserDialogVisible">
            <el-form :model="editUserform" ref="editUserform">
                <el-form-item label="用户ID" :label-width='formLabelWidth'>
                    <el-input v-model="editUserform.ID" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" :label-width='formLabelWidth'>
                    <el-input v-model="editUserform.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width='formLabelWidth'>
                    <el-input v-model="editUserform.sex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" :label-width='formLabelWidth'>
                    <el-input v-model="editUserform.birthday" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属学院" :label-width='formLabelWidth'>
                    <el-input v-model="editUserform.college" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属班级" :label-width='formLabelWidth'>
                    <el-input v-model="editUserform.class" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width='formLabelWidth'>
                    <el-input v-model="editUserform.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入馆时间" :label-width='formLabelWidth'>
                    <el-input v-model="editUserform.time" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="editUserDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="handleUpdate">确 定</el-button>
          </div>
</el-dialog>
    </el-card>
</template>

<script>
export default {
  // 数据区域
  data () {
    return {
      // 表格的数据条数
      tableDataSize: 0,
      // 每页的数据条数
      pageDataSize: 5,
      // 当前页号
      currentPageNumber: 1,
      // 服务器的数据
      serverData: '',
      // 表格的数据
      tableData: '',
      // 是否显示添加用户的dialog
      addUserDialogVisible: false,
      // 是否显示编辑用户的dialog
      editUserDialogVisible: false,
      // 添加用户的form
      addUserform: {
        ID: '',
        name: '',
        sex: '',
        birthday: '',
        college: '',
        class: '',
        phone: '',
        time: ''
      },
      // 编辑页面的form
      editUserform: {
        ID: '',
        name: '',
        sex: '',
        birthday: '',
        college: '',
        class: '',
        phone: '',
        time: ''
      },
      // form的label长度
      formLabelWidth: '120px',
      // 存储选中项内容
      selectionArray: []
    }
  },
  // html渲染之前自动调用的内容
  created () {
    this.iniServerData()
    this.handlePage()
  },
  // 初始化html页面后自动调用的内容
  mounted () {
    // this.iniServerData()
    // this.handlePage()
  },
  // 方法区域
  methods: {
    // 模拟获取服务器数据
    iniServerData () {
      this.serverData = [{
        ID: '2017090183',
        name: '吕梦蝶1',
        sex: '女',
        birthday: '19981110',
        college: '计算机学院',
        class: '2017级电子商务',
        phone: '18997093806',
        time: '2020-7-22'
      }, {
        ID: '2016090069',
        name: '马鹏2',
        sex: '男',
        birthday: '19980811',
        college: '计算机学院',
        class: '2016级软件工程',
        phone: '18997093801',
        time: '2020-7-22'
      }, {
        ID: '2017090122',
        name: '董文雅3',
        sex: '女',
        birthday: '19981115',
        college: '计算机学院',
        class: '2017级计算机科学与技术',
        phone: '18997093802',
        time: '2020-7-22'
      }, {
        ID: '2017090138',
        name: '王祺4',
        sex: '女',
        birthday: '19981119',
        college: '计算机学院',
        class: '2017级网络工程',
        phone: '18997093803',
        time: '2020-7-23'
      }, {
        ID: '2016090070',
        name: '马鹏5',
        sex: '男',
        birthday: '19981117',
        college: '计算机学院',
        class: '2016级软件工程',
        phone: '18997093801',
        time: '2020-7-22'
      }, {
        ID: '2017090123',
        name: '董文雅6',
        sex: '女',
        birthday: '19981114',
        college: '计算机学院',
        class: '2017级计算机科学与技术',
        phone: '18997093802',
        time: '2020-7-22'
      }, {
        ID: '2017090139',
        name: '王祺7',
        sex: '女',
        birthday: '19981115',
        college: '计算机学院',
        class: '2017级网络工程',
        phone: '18997093803',
        time: '2020-7-23'
      }, {
        ID: '2016090071',
        name: '马鹏8',
        sex: '男',
        birthday: '19981116',
        college: '计算机学院',
        class: '2016级软件工程',
        phone: '18997093801',
        time: '2020-7-22'
      }, {
        ID: '2017090124',
        name: '董文雅9',
        sex: '女',
        birthday: '20000405',
        college: '计算机学院',
        class: '2017级计算机科学与技术',
        phone: '18997093802',
        time: '2020-7-22'
      }, {
        ID: '2017090140',
        name: '王祺10',
        sex: '女',
        birthday: '19990727',
        college: '计算机学院',
        class: '2017级网络工程',
        phone: '18997093803',
        time: '2020-7-23'
      }, {
        ID: '2016090072',
        name: '马鹏11',
        sex: '男',
        birthday: '19981118',
        college: '计算机学院',
        class: '2016级软件工程',
        phone: '18997093801',
        time: '2020-7-22'
      }, {
        ID: '2017090125',
        name: '董文雅12',
        sex: '女',
        birthday: '20005012',
        college: '计算机学院',
        class: '2017级计算机科学与技术',
        phone: '18997093802',
        time: '2020-7-22'
      }, {
        ID: '2017090141',
        name: '王祺13',
        sex: '女',
        birthday: '19990513',
        college: '计算机学院',
        class: '2017级网络工程',
        phone: '18997093803',
        time: '2020-7-23'
      }]
    },
    // 处理分页
    handlePage () {
      const begin = (this.currentPageNumber - 1) * this.pageDataSize
      this.tableData = this.serverData.slice(begin, begin + this.pageDataSize)
      this.tableDataSize = this.serverData.length
    },
    // 每页条数变化时调用
    handleSizeChange (val) {
      this.pageDataSize = val
      this.handlePage()
      console.log(`每页 ${val} 条`)
    },
    // 当前页号变化时调用
    handleCurrentChange (val) {
      this.currentPageNumber = val
      this.handlePage()
      console.log(`当前页: ${val}`)
    },
    // 添加信息
    addUser () {
      // 将form中的数据添加到服务器数据中
      this.serverData.push(this.addUserform)
      // 刷新数据集
      this.handlePage()
      // 关闭dialog
      this.addUserDialogVisible = false
    },
    // 删除信息
    handleDelete (index, row) {
      // 删除服务器数据集中的第index个
      this.serverData.splice(index, 1)
      // 刷新数据集
      this.handlePage()
    },
    // 批量删除
    batchHandleDelete () {
      // 循环遍历选中项数组
      this.selectionArray.forEach(selectElement => {
        console.log('选中项的I：' + selectElement.ID)
        let index = 1
        // 循环遍历服务器数据集
        this.serverData.forEach(serverElement => {
          console.log('服务器数据集的I：' + serverElement.ID)
          // 如果选中项的index等于服务器数据集的index
          if (selectElement.ID === serverElement.ID) {
            this.handleDelete(index, {})
          }
          index++
        })
      })
    },
    // 将编辑需要的信息写入到dialog中
    handleExit (index, row) {
      this.editUserDialogVisible = true // dialog对话窗口打开
      // 给editUserform赋值
      this.editUserform = row
    },
    // 更新用户信息
    handleUpdate () {
      // 先找到服务器数据集中Id相同项
      // 遍历服务器数据集
      this.serverData.forEach(element => {
        // 如果element的Id等于修改面板的Id，则更新其他的数据
        if (element.ID === this.editUserform.ID) {
          for (var key in element) {
            if (key !== 'ID') {
              element[key] = this.editUserform[key]
            }
          }
        }
      })
      this.editUserDialogVisible = false
    },
    // 当选中项变化时调用
    handleSelectionChange (val) {
      this.selectionArray = val
    }
  }
}
</script>

<style lang="less" scoped>
    .el-row {
        margin-bottom: 20px;
        &:last-child {
        margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 501px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
